<template>
  <div class="indexSwiper" v-show="isShow" >
	  <div class="swiper-container indexContainer">
	     <div class="swiper-wrapper">
	        <div class="swiper-slide" v-for="(item,index) in silder" @click="intoBrandInfo(item.id)">
	        	<div class="swiperBox">
	        		<div class="photo">
	        			<img v-bind:src="item.image">
	        		</div>
	        		<div class="photoContainer">
	        			<p>{{item.title}}</p>
	        			<span>{{item.content}}</span>
	        		</div>
	        	</div>
	        </div>
	     </div> 
	     <div class="swiper-button-next swiperNext"></div>
	     <div class="swiper-button-prev swiperPrev"></div>
	  </div>
  </div>
</template>
<script>
export default {
  name: 'indexSwiper',
  data () {
    return {
        name:'我要测试首页',
        silder:[],
        url:'/api/brands',
        isShow:false
    }
  },
  watch: {
    silder: function() {
        this.$nextTick(function(){
            var swiper = new Swiper('.indexContainer', {
		      navigation: {
		        nextEl: '.swiperNext',
		        prevEl: '.swiperPrev',
		      },
		    });           
        })
    }
  },
  methods: {
      getSlider () {
        this.$loading(this.$t("contact.loading"));
        let self = this;
        axios.get(self.url)
            .then(function (response) {
               if(response.data.data == undefined || response.data.data.length <= 0 ){
                   self.isShow = false;
               }else{
                  self.isShow = true;
                  self.silder = response.data.data;
               }
                self.closeLoading();
            })
            .catch(function (error) {
                console.log(JSON.stringify(error));
            })           
      },
      intoBrandInfo(brand_id){
          this.$router.push({
             path: '/brand',
             query: {
                 id: brand_id
             }
          })       	  
      },
      closeLoading(){
         this.$loading.close();
      }
  },
  created:function () {
     this.getSlider();
  } 
}
</script>

<style>
.indexContainer{width:86%;height:260px;margin:26px auto;}
.swiper-slide {text-align: center;font-size: 18px;cursor: pointer;}
.swiper-button-prev {background: url(../assets/img/home_up.png)0% 50% no-repeat;background-size:46px 46px;width:46px;height: 46px;}
.swiper-button-next {background: url(../assets/img/home_down.png)0% 50% no-repeat;background-size:46px 46px;width:46px;height: 46px;}
.swiperBox{width:76%;height:220px;margin:15px auto;}
.photo{float:left;width:41%;height:220px;overflow: hidden;display: flex;align-items: center;}
.photo img{width:100%;display:block;}
.photoContainer{width:56%;float:right;margin-right:0px;height:100%;color:#7b5c55;}
.photoContainer p{width:100%;height:50px;line-height: 50px;text-align:left;overflow: hidden;text-overflow: ellipsis;display: box;display: -webkit-box;-webkit-line-clamp:1;-webkit-box-orient: vertical;font-size:1.02rem;font-weight:bold;}
.photoContainer span{display:block;width:100%;height:156px;line-height:26px;text-align:left;overflow: hidden;text-overflow: ellipsis;display: box;display: -webkit-box;-webkit-line-clamp:6;-webkit-box-orient: vertical;font-size:0.9rem;}
@media screen and (max-width: 768px) {
.indexContainer{width:98%;height:270px;margin:10px auto;}
.swiper-button-prev {background: url(../assets/img/home_up.png)0% 50% no-repeat;background-size:26px 26px;width:26px;height: 26px;}
.swiper-button-next {background: url(../assets/img/home_down.png)0%  50% no-repeat;background-size:26px 26px;width:26px;height: 26px;}
.swiperBox{width:72%;height:270px;margin:0px auto;}
.photo{width:100%;height:150px;overflow: hidden;}
.photo img{display:block;width:auto;height:100%;margin:0px auto;}
.photoContainer{width:100%;height:120px;color:#7b5c55;}
.photoContainer p{font-size:0.94rem;height:36px;line-height:36px;text-align:center;}
.photoContainer span{font-size:0.78rem;height:80px;line-height:20px;-webkit-line-clamp:4;}
}

</style>
